document.addEventListener('DOMContentLoaded', function () {
    const data = {
        management: [
            {level: 'M8', percentage: '2%', count: 10},
            {level: 'M7', percentage: '3%', count: 15},
            {level: 'M6', percentage: '5%', count: 30},
            {level: 'M5', percentage: '7%', count: 50},
            {level: 'M4', percentage: '10%', count: 70},
            {level: 'M3', percentage: '12%', count: 110},
            {level: 'M2', percentage: '19%', count: 90},
            {level: 'M1', percentage: '22%', count: 105},
        ],
        technical: [
            {level: '初级工程师', percentage: '15%', count: 60},
            {level: '工程师', percentage: '30%', count: 123},
            {level: '专家', percentage: '21%', count: 85},
            {level: '高级专家', percentage: '17%', count: 68},
            {level: '首席专家', percentage: '11%', count: 45},
            {level: '科学家', percentage: '4%', count: 16},
        ],
        operation: [
            {level: '初级工', percentage: '38%', count: 350},
            {level: '中级工', percentage: '35%', count: 320},
            {level: '高级工', percentage: '9%', count: 90},
            {level: '技师', percentage: '13%', count: 120},
            {level: '首席技师', percentage: '2%', count: 25},
            {level: '技能大师', percentage: '0%', count: 8},
        ]
    };

    function createFunnelChart(containerId, data) {
        const container = document.getElementById(containerId);
        let bottom = 0;

        data.reverse().forEach((item, index) => {
            const div = document.createElement('div');
            div.style.height = item.percentage;
            div.style.bottom = bottom + '%';
            div.style.background = `linear-gradient(to top, #1f77b4 ${100 - index * 10}%, #6baed6)`;
            div.textContent = `${item.level} (${item.percentage})`;
            container.appendChild(div);
            bottom += parseFloat(item.percentage);
        });
    }

    createFunnelChart('management', data.management);
    createFunnelChart('technical', data.technical);
    createFunnelChart('operation', data.operation);
});